<template>
	<div class="body">
		<retreat title="地址管理"></retreat>
		<van-address-list
		  v-model="chosenAddressId"
		  :list="list"
		  :disabled-list="disabledList"
		  disabled-text="以下地址超出配送范围"
		  default-tag-text="默认"
		  @add="onAdd"
		  @edit="onEdit"
		/>
	</div>
</template>

<script>
	import Retreat from '@/components/Retreat.vue'
	import {
		Toast,
		AddressList
	} from 'vant';

	export default {
		data() {
			return {
				chosenAddressId: '1',
				list: [{
						id: '1',
						name: '张三',
						tel: '13000000000',
						address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
						isDefault: true,
					},
					{
						id: '2',
						name: '李四',
						tel: '1310000000',
						address: '浙江省杭州市拱墅区莫干山路 50 号',
					},
				],
				disabledList: [{
					id: '3',
					name: '王五',
					tel: '1320000000',
					address: '浙江省杭州市滨江区江南大道 15 号',
				}, ],
			};
		},
		methods: {
			onAdd() {
				Toast('新增地址');
			},
			onEdit(item, index) {
				Toast('编辑地址:' + index);
			},
		},
		components: {
			Retreat,
			Toast,
			AddressList
		}
	};
</script>

<style lang="less" scoped>
	@themeColor: #1ba4f0;
	@backColor: #f5f5f5;

	@shenglue: {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
